<template>
<!-- 推荐管理 -->
  <div id="Administration">
    <div id="managements">
      <!--搜索框 -->
      <div id="manage-top">
        <el-select v-model="allPages.value" clearable placeholder="请选择用户状态">
          <el-option  style="height:46px"
            v-for="item in inquire"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i>
          <span>查找</span>
        </button>
        <button type="button" class="el-button el-button--primary" @click="additions()"  v-Promise="'promote:recommend:create'">
          <div>
            <i class="el-icon-edit"></i>
            <span>添加</span>
          </div>
        </button>
      </div>
      <!-- 数据操作 -->
      <div id="manage-bottom">
        <el-table
          border
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :key="id"
        >
          <el-table-column label="推荐ID" prop="id"></el-table-column>
          <el-table-column label="推荐商铺" prop="spuTitle"></el-table-column>
          <el-table-column label="推荐类型" prop="recommendType">
            <template slot-scope="scope">      
                <el-tag>{{scope.row.recommendType==1?"橱窗推荐":""}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="right" label="操作" style=" width: 2010px;">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)" v-Promise="'promote:recommend:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages='allPages'></Paging>
      </div>
      <div>
        <!-- 添加编辑弹框 -->
        <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
          <!-- 登录 -->
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="ruleForm"
                status-icon
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
               <!-- 推荐类型 -->
                <el-form-item label="推荐类型">
                 <el-select v-model="ruleForm.gender"  placeholder="请选择推荐类型">
                  <el-option style="height:46px"
                    v-for="item in inquire"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </el-form-item>
                <!-- 推荐商品 -->
                <div class="block">
                 <el-form-item label="推荐类型">
                      <el-cascader
                        v-model="input"
                         :options="spuTitl"
                          ref="cascader"
                        ></el-cascader>
                  </el-form-item>
                </div>       
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="affirm()">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import recom from "@/api/recommend.js";
import Paging from "../../components/Paging"; //分页
import qs from "qs";
export default {
components:{
  Paging,
  },
  data() {
    return {
      spuTitl:[],
      inquire: [
       {
          value: 1,
          label: '橱窗推荐'
        }, {
          value: null,
          label: '全部'
        }],
      //
      id: "",
      input:"",
      search: "",
      tableData: [{}],
      dialogTableVisible: false,
      dialogFormVisible: false, //弹窗口
      titleName: "", //是否添加还是编辑
      currentPage: 1, //当前的默认的页数
      eachpage: 10, //默认的页码
      total: 0, //初始值共数据条
      totalPageNo: 1,
      ider: 0,
      value1: [],
      form: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        username: "",
        phone: ""
      },
      allPages:{
        currentPage: 1, //当前的默认的页数
        eachpage: 10, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        // 查询
        value: "",
        input:"",
      },//分页  
      array: [],
      //
      roleIds: "",
      ruleForm: {
        gender:""
      },
    };
  },
  methods: {
    // 递归
      getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].children.length<1){
          // children若为空数组，则将children设为undefined
          data[i].children=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    // sup树
    supshu(){
      let _this=this;
        recom.spuTitles().then(function(res) {
        _this.spuTitl=_this.getTreeData(res.data.data)
      })
    },
    //添加
    additions() {
      this.titleName = "添加";
      this.modalType = "add";
      this.dialogFormVisible = true;
      this.ruleForm={}
    },
    // 分页负值
     handles(val){
      this.allPages=val
      this.management()
    },
    // 管理员数据列表
    management() {
      let _this = this;
      recom.recommend(_this.allPages).then(function(res) {
        _this.tableData = res.data.data.items;
        _this.total = res.data.data.count;
        // 分页
        _this.allPages.currentPage = res.data.data.pageNo;
        _this.allPages.eachpage = res.data.data.pageSize;
        _this.allPages.total = res.data.data.total;
        _this.allPages.totalPageNo = res.data.data.totalPageNo;
      });
    },
    // 删除
    handleDelete(index, row) {
      var _this = this;
      // 提示框
      _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.$information.success("删除成功")
          let data = {
            recommendType:row.recommendType,
            id: _this.tableData[index].id
          };
          recom.handleDeletec(data).then(function(res) {
            _this.tableData.splice(index, 1);
          });
        })
    },
     // 判断是否添加还是编辑
    affirm() {
      let nodesObj = this.$refs.cascader.getCheckedNodes()[0].data.id
      let _this = this;
        //添加
        if (_this.titleName === "添加") {
          let data = {
              recommendType:_this.ruleForm.gender,
              spuId:nodesObj
          };
          recom.addition(data).then(function(res) {
            if (res.data.errmsg == "成功") {             
              _this.$information.success("这是一条添加成功的提示消息")
              _this.management();
            } else {
              _this.$information.error("这是一条添加失败的提示消息")
            }
          });
            _this.dialogFormVisible = false;
        }    
      _this.dialogFormVisible = false;
    },
  },
  
  created() {
    this.management();
    this.supshu() //sup树
  },
   watch:{
    dialogFormVisible(){
      this.$nextTick(() => {
       this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style scoped>
#Administration {
  width: 100%;
  height: 100%;
}
#managements {
  width: 80vw;
  height: 80vh;
  margin: auto;
}
/* 搜索框 */
#manage-top {
  width: 50vw;
  display: flex;
  margin-bottom: 30px;
}
#manage-top .el-input__inner {
  width: 200px;
}
.el-input {
  width: 210px;
}

/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf {
  text-align: center;
}
/*  */
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 80%;
  margin: auto;
}
.loginRight .login-title {
  color: #333;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  margin-top: 40px;
}
.el-form-item/deep/input {
  background: transparent;
  border-radius: 0;
  color: #333;
  display: inline;
}
.el-form-item {
  position: relative;
}
.el-form-item/deep/i {
  display: inline;
}
.login-img {
  position: absolute;
  top: 2px;
  left: -60px;
}

.el-checkbox {
  width: 300px;
  margin: 20px 0px 30px 0px;
}
</style>